<template>
  <div class="access-control">
    <!-- 安全组列表 Section -->
    <el-card class="section" shadow="hover">
      <div class="section-header">
        <div class="header-left">
          <h3 class="section-title">
            <i class="el-icon-s-grid"></i>
            安全组列表
          </h3>
          <div class="section-subtitle">管理您的安全组</div>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-folder-add"
              @click="handleAddGroup"
            >添加安全组</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleDeleteGroup"
              :disabled="!selectedRows1.length"
            >删除安全组</el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh"
              @click="handleRefresh"
              :loading="loading"
            >刷新</el-button>
          </el-button-group>
        </div>
      </div>

      <el-table
        :data="securityGroupData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange1"
        class="custom-table"
      >
        <el-table-column type="selection" width="55" align="center" />

        <el-table-column label="安全组名称" min-width="150">
          <template slot-scope="{ row }">
            <span class="security-group-name">{{ row.name || 'Sys-WebServer' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="安全组ID" min-width="200">
          <template slot-scope="{ row }">
            <span class="security-group-id">{{ row.id || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="描述" min-width="200">
          <template slot-scope="{ row }">
            <span>{{ row.description || '--' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="规则数量" width="100" align="center">
          <template slot-scope="{ row }">
            <el-tag type="info" size="small">{{ row.rules ? row.rules.length : 0 }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" min-width="180">
          <template slot-scope="{ row }">
            <span>{{ row.createTime || '--' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="handleViewRules(row)">查看规则</el-button>
<!--            <el-button type="text" size="small" @click="handleEditGroup(row)">编辑</el-button>-->
            <el-button type="text" size="small" class="danger-text" @click="handleDeleteSingleGroup(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 入方向规则 Section -->
    <el-card class="section" shadow="hover">
      <div class="section-header">
        <div class="header-left">
          <h3 class="section-title">
            <i class="el-icon-download"></i>
            入方向规则
            <span class="badge" v-if="inboundRules.length">{{ inboundRules.length }}</span>
          </h3>
          <div class="section-subtitle" v-if="selectedGroup">
            当前安全组: <span class="highlight-text">{{ selectedGroup.name || 'Sys-WebServer' }}</span>
          </div>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="handleAddRule"
            >添加安全组规则</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="handleDeleteRule"
              :disabled="!selectedRows2.length"
            >删除安全组规则</el-button>
          </el-button-group>
        </div>
      </div>

      <el-table
        :data="inboundRules"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange2"
        class="custom-table"
      >
        <el-table-column type="selection" width="55" align="center" />

        <el-table-column label="优先级" width="100" align="center">
          <template slot-scope="{ row }">
            <span class="priority">{{ row.priority || 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="策略" width="100" align="center">
          <template slot-scope="{ row }">
            <el-tag
              :type="row.action === '允许' ? 'success' : 'danger'"
              size="small"
              effect="plain"
            >{{ row.action || '允许' }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="协议端口" min-width="150">
          <template slot-scope="{ row }">
            <div class="protocol-port">
              <span>{{ formatProtocolPort(row) }}</span>
              <el-tooltip v-if="row.ip_protocol !== ''" content="查看详情" placement="top">
                <i class="el-icon-info-circle protocol-info" @click="showProtocolInfo(row)"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="{ row }">
            <el-tag
              :type="row.ipVersion === 'IPv6' ? 'warning' : ''"
              size="small"
              effect="plain"
            >
              {{ row.ipVersion || 'IPv4' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="源地址" min-width="150">
          <template slot-scope="{ row }">
            <div class="source-address">
              <span :class="{ 'highlight-text': row.sourceAddress === 'Sys-WebServer' }">
                {{ row.sourceAddress || '0.0.0.0/0' }}
              </span>
              <el-tooltip v-if="row.sourceAddress && row.sourceAddress !== '全部'" content="查看详情" placement="top">
                <i class="el-icon-info-circle source-info"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="描述" min-width="200">
          <template slot-scope="{ row }">
            <span>{{ row.description || '--' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="{ row }">
<!--            <el-button type="text" size="small" @click="handleEditRule(row)">编辑</el-button>-->
<!--            <el-button type="text" size="small" @click="handleCloneRule(row)">克隆</el-button>-->
            <el-button type="text" size="small" class="danger-text" @click="handleDeleteRule(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 规则对话框 -->
    <el-dialog
      :title="dialogType === 'create' ? '添加安全组规则' : '编辑安全组规则'"
      :visible.sync="dialogVisible"
      width="600px"
      :modal="false"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="formRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="方向" prop="direction">
          <el-radio-group v-model="ruleForm.direction">
            <el-radio label="ingress">入方向</el-radio>
            <el-radio label="egress">出方向</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="优先级" prop="priority">
          <el-input-number
            v-model="ruleForm.priority"
            :min="1"
            :max="100"
            style="width: 150px"
          />
          <span class="form-tip">数字越小，优先级越高</span>
        </el-form-item>

<!--        <el-form-item label="策略" prop="action">-->
<!--          <el-radio-group v-model="ruleForm.action">-->
<!--            <el-radio label="允许">允许</el-radio>-->
<!--            <el-radio label="拒绝">拒绝</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
        <el-form-item label="协议类型" prop="protocol">
          <el-select v-model="ruleForm.protocol" placeholder="请选择协议类型" style="width: 100%">
            <el-option label="tcp" value="tcp" />
            <el-option label="udp" value="udp" />
            <el-option label="icmp" value="icmp" />
            <el-option label="icmpv6" value="icmpv6" />
          </el-select>
        </el-form-item>

        <el-form-item
          label="端口范围"
          prop="portRange"
          v-if="ruleForm.protocol === 'tcp' || ruleForm.protocol === 'udp'"
        >
          <el-input
            v-model="ruleForm.portRange"
            placeholder="单个端口：80；端口范围：1-65535；多个端口：22,80,443"
          />
          <div class="port-presets">
            <el-button type="text" size="small" @click="setPortRange('22')">SSH(22)</el-button>
            <el-button type="text" size="small" @click="setPortRange('80')">HTTP(80)</el-button>
            <el-button type="text" size="small" @click="setPortRange('443')">HTTPS(443)</el-button>
            <el-button type="text" size="small" @click="setPortRange('3389')">RDP(3389)</el-button>
            <el-button type="text" size="small" @click="setPortRange('1-65535')">全部</el-button>
          </div>
        </el-form-item>

        <el-form-item label="IP版本" prop="ipVersion">
          <el-radio-group v-model="ruleForm.ipVersion">
            <el-radio label="IPv4">IPv4</el-radio>
            <el-radio label="IPv6">IPv6</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="ruleForm.direction === 'ingress' ? '源地址' : '目的地址'" prop="addressValue">
<!--          <el-select v-model="ruleForm.addressType" style="width: 150px" @change="handleAddressTypeChange">-->
<!--            <el-option label="CIDR" value="CIDR" />-->
<!--            <el-option label="全部" value="All" />-->
<!--          </el-select>-->

          <el-input
            v-model="ruleForm.addressValue"
            placeholder="例如：192.168.0.0/24"
          />
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="ruleForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入规则描述信息"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 安全组对话框 -->
    <el-dialog
      title="添加安全组"
      :visible.sync="groupDialogVisible"
      width="500px"
      :modal="false"
    >
      <el-form
        ref="groupForm"
        :model="groupForm"
        :rules="groupRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="安全组名称" prop="name">
          <el-input v-model="groupForm.name" placeholder="请输入安全组名称" />
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="groupForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入安全组描述信息"
          />
        </el-form-item>

<!--        <el-form-item label="模版" prop="template">-->
<!--          <el-select v-model="groupForm.template" placeholder="请选择安全组模版" style="width: 100%">-->
<!--            <el-option label="自定义" value="custom" />-->
<!--            <el-option label="Web服务器" value="web" />-->
<!--            <el-option label="数据库服务器" value="database" />-->
<!--          </el-select>-->
<!--          <div class="template-description" v-if="groupForm.template !== 'custom'">-->
<!--            <i class="el-icon-info"></i>-->
<!--            <span v-if="groupForm.template === 'web'">-->
<!--              Web服务器模版将自动添加HTTP(80)、HTTPS(443)和SSH(22)端口的入方向规则-->
<!--            </span>-->
<!--            <span v-else-if="groupForm.template === 'database'">-->
<!--              数据库服务器模版将自动添加MySQL(3306)、PostgreSQL(5432)和SSH(22)端口的入方向规则-->
<!--            </span>-->
<!--          </div>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitGroupForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  security,
  statistics,
  securityadd,
  securitydel,
  securityrules,
  securityrulesdel
} from "@/api/resell/orderinstance";

export default {
  name: 'AccessControl',
  props: {
    currentResource: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 安全组数据
      securityGroupData: [],

      // 入方向规则
      inboundRules: [],

      // 选中的安全组
      selectedGroup: null,

      // 选中的行
      selectedRows1: [],
      selectedRows2: [],

      // 加载状态
      loading: false,

      // 对话框相关
      dialogVisible: false,
      dialogType: 'create', // create 或 edit

      // 规则表单
      ruleForm: {
        direction: 'ingress',
        priority: 1,
        action: '允许',
        protocol: 'tcp',
        portRange: '1-65535',
        ipVersion: 'IPv4',
        addressType: 'All',
        addressValue: '',
        description: ''
      },

      // 安全组表单
      groupForm: {
        name: '',
        description: '',
        template: 'custom'
      },

      // 安全组对话框
      groupDialogVisible: false,

      // 编辑规则ID
      editingRuleId: '',

      // 表单验证规则
      formRules: {
        priority: [
          { required: true, message: '请输入优先级', trigger: 'blur' },
          { type: 'number', min: 1, max: 100, message: '优先级必须在1-100之间', trigger: 'blur', transform: val => Number(val) }
        ],
        protocol: [
          { required: true, message: '请选择协议类型', trigger: 'change' }
        ],
        portRange: [
          { required: true, message: '请输入端口范围', trigger: 'blur' },
          { pattern: /^([1-9]\d{0,4}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])(-([1-9]\d{0,4}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5]))?$/,
            message: '端口范围格式不正确，应为1-65535之间的单个端口或端口范围', trigger: 'blur' }
        ],
        addressValue: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      },

      // 安全组表单验证规则
      groupRules: {
        name: [
          { required: true, message: '请输入安全组名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        description: [
          { max: 200, message: '描述不能超过200个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取安全组列表
    getList() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        security(this.currentResource)
          .then(response => {
            this.loading = false;
            console.log(response);
            if (response && response.rows && response.rows.length > 0) {
              // 存储安全组数据到单独的变量
              this.securityGroupData = response.rows;

              // 默认选中第一个安全组
              this.selectedGroup = response.rows[0];
              this.inboundRules = response.rows[0].rules || [];

              resolve(response);
            } else {
              this.securityGroupData = [];
              this.inboundRules = [];
              this.selectedGroup = null;
              resolve({ rows: [] });
            }
          })
          .catch(error => {
            this.loading = false;
            console.error('获取数据失败:', error);
            reject(error);
          });
      });
    },

    // 刷新数据
    handleRefresh() {
      this.getList();
    },

    // 表格选择变化
    handleSelectionChange1(selection) {
      this.selectedRows1 = selection;
    },

    handleSelectionChange2(selection) {
      this.selectedRows2 = selection;
    },

    // 添加安全组
    handleAddGroup() {
      this.groupForm = {
        name: '',
        description: '',
        template: 'custom'
      };
      this.groupDialogVisible = true;
    },

    // 删除安全组
    handleDeleteGroup() {
      if (this.selectedRows1.length === 0) {
        this.$message.warning('请选择要删除的安全组');
        return;
      }

      this.$prompt(`此操作将永久删除选中的 ${this.selectedRows1.length} 个安全组, 请输入<span style="color: #F56C6C; font-weight: bold;">删除多个安全组</span>以确认`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^删除多个安全组$/,
        inputErrorMessage: '请输入删除多个安全组以确认删除',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(({ value }) => {
        // 用户输入了正确的确认文本
        const ids = this.selectedRows1.map(row => row.id).join(',');
        this.currentResource.securitygroupid = ids;

        securitydel(this.currentResource).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '安全组删除成功'
            });
            this.getList(); // 刷新列表
          } else {
            this.$message({
              type: 'error',
              message: response.msg || '删除失败'
            });
          }
        }).catch(error => {
          console.error('删除安全组失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        // 用户取消了操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 查看安全组规则
    handleViewRules(row) {
      this.selectedGroup = row;
      this.inboundRules = row.rules || [];
    },

    // 编辑安全组
    handleEditGroup(row) {
      this.groupForm = {
        id: row.id,
        name: row.name || '',
        description: row.description || '',
        template: 'custom'
      };
      this.groupDialogVisible = true;
    },

    // 删除单个安全组
    handleDeleteSingleGroup(row) {
      this.$prompt(`此操作将永久删除选中的 ${row.name} 安全组, 删除请输入<span style="color: #F56C6C; font-weight: bold;">删除安全组</span>?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^删除安全组$/,
        inputErrorMessage: '请输入删除安全组确认删除',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(({ value }) => {
        // 用户输入了正确的确认文本
        this.currentResource.securitygroupid = row.id;
        this.currentResource.securitygroupname = row.name;
        securitydel(this.currentResource).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '安全组删除成功'
            });
            this.getList(); // 刷新列表
          } else {
            this.$message({
              type: 'error',
              message: response.msg || '删除失败'
            });
          }
        }).catch(error => {
          console.error('删除安全组失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        // 用户取消了操作
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 添加规则
    handleAddRule() {
      this.dialogType = 'create';
      this.dialogVisible = true;
      this.ruleForm = {
        direction: 'ingress',
        priority: 1,
        action: '允许',
        protocol: 'tcp',
        portRange: '1-65535',
        ipVersion: 'IPv4',
        addressValue: '0.0.0.0/0',
        description: ''
      };
    },

    // 编辑规则
    handleEditRule(row) {
      this.dialogType = 'edit';
      this.dialogVisible = true;
      this.ruleForm = {
        id: row.id,
        direction: row.direction || 'ingress',
        priority: row.priority || 1,
        action: row.action || '允许',
        protocol: row.ip_protocol || 'tcp',
        portRange: row.port || '1-65535',
        ipVersion: row.ipVersion || 'IPv4',
        addressValue: row.sourceAddress || '0.0.0.0/0',
        description: row.description || ''
      };
    },

    // 克隆规则
    handleCloneRule(row) {
      this.dialogType = 'create';
      this.dialogVisible = true;
      this.ruleForm = {
        direction: row.direction || 'ingress',
        priority: row.priority || 1,
        action: row.action || '允许',
        protocol: row.ip_protocol || 'tcp',
        portRange: row.port || '1-65535',
        ipVersion: row.ipVersion || 'IPv4',
        addressValue: row.sourceAddress || '0.0.0.0/0',
        description: (row.description || '') + ' (克隆)'
      };
    },

    // 删除规则
    handleDeleteRule(row) {
      this.$prompt(`此操作将永久删除该规则, 是否继续, 请输入<span style="color: #F56C6C; font-weight: bold;">删除安全组规则</span>以确认`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^删除安全组规则$/,
        inputErrorMessage: '请输入删除安全组规则确认删除',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        // 实现删除逻辑
        this.currentResource.securitygroupid = row.id;
        securityrulesdel(this.currentResource).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: '安全组删除成功'
            });
            this.getList(); // 刷新列表
          } else {
            this.$message({
              type: 'error',
              message: response.msg || '删除失败'
            });
          }
        }).catch(error => {
          console.error('删除安全组失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {});
    },

    // 提交表单
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 如果地址值为空，默认设置为 0.0.0.0/0
          if (!this.ruleForm.addressValue || this.ruleForm.addressValue.trim() === '') {
            this.ruleForm.addressValue = '0.0.0.0/0';
          }

          // 构建规则对象
          const rule = {
            id: this.dialogType === 'create' ? 'rule-' + Date.now() : this.editingRuleId,
            priority: this.ruleForm.priority,
            action: this.ruleForm.action,
            protocol: this.ruleForm.protocol,
            port: this.ruleForm.protocol === 'tcp' || this.ruleForm.protocol === 'udp'
              ? this.ruleForm.portRange : '',
            ipVersion: this.ruleForm.ipVersion,
            sourceAddress: this.ruleForm.addressType === 'All' ? '全部' : this.ruleForm.addressValue,
            description: this.ruleForm.description
          };

          // 保存规则
          // if (this.dialogType === 'create') {
          //   this.inboundRules.unshift(rule);
          // } else {
          //   const index = this.inboundRules.findIndex(r => r.id === this.editingRuleId);
          //   if (index !== -1) {
          //     this.inboundRules.splice(index, 1, rule);
          //   }
          // }

          // 调用API保存规则

          this.currentResource.securitygroupid =  this.selectedGroup.id; //安全组id
          this.currentResource.description = this.ruleForm.description;
          this.currentResource.direction =this.ruleForm.direction; //ingress入 egress出
          this.currentResource.ethertype = this.ruleForm.ipVersion; //IPv4 IPv6
          this.currentResource.protocol = this.ruleForm.protocol; //icmp、tcp、udp、icmpv6
          this.currentResource.multiport = this.ruleForm.portRange; //端口 9999
          this.currentResource.remoteipprefix =  this.ruleForm.addressValue;  //ip地址段  0.0.0.0/0
          this.currentResource.priority = this.ruleForm.priority;
          securityrules(this.currentResource).then(response => {
            if (response.code === 200) {
              this.$message({
                message: '安全组规则创建成功',
                type: 'success'
              });
              this.dialogVisible = false;
              this.getList();
            } else {
              this.$message({
                message: response.msg || '操作失败',
                type: 'error'
              });
            }
          }).catch(error => {
            console.error('保存规则失败:', error);
            this.$message.error('保存失败');
          });
        }
      });
    },

    // 提交安全组表单
    submitGroupForm() {
      this.$refs.groupForm.validate(valid => {
        if (valid) {
          // 调用API保存安全组
          this.currentResource.securitygroupname = this.groupForm.name;
          this.currentResource.description = this.groupForm.description;
          securityadd(this.currentResource).then(response => {
            if (response.code === 200) {
              this.$message({
                message: '安全组创建成功',
                type: 'success'
              });
              this.groupDialogVisible = false;
              this.getList(); // 刷新列表
            } else {
              this.$message({
                message: response.msg || '操作失败',
                type: 'error'
              });
            }
          }).catch(error => {
            console.error('保存安全组失败:', error);
            this.$message.error('保存失败');
          });
        }
      });
    },

    // 格式化协议端口显示
    formatProtocolPort(row) {
      if (!row.ip_protocol) return '--';

      if (row.ip_protocol === 'tcp' || row.ip_protocol === 'udp') {
        return `${row.ip_protocol}: ${row.from_port || '1-65535'}`;
      } else if (row.ip_protocol === 'icmp') {
        return 'ICMP';
      } else if (row.ip_protocol === 'all' || row.ip_protocol === '-1') {
        return '全部';
      } else {
        return row.ip_protocol;
      }
    },

    // 显示协议详情
    showProtocolInfo(row) {
      this.$alert(`协议: ${row.protocol}<br>端口: ${row.port || '全部'}`, '协议详情', {
        dangerouslyUseHTMLString: true
      });
    },

    // 设置端口范围
    setPortRange(value) {
      this.ruleForm.portRange = value;
    },

    // 处理地址类型变化
    handleAddressTypeChange(value) {
      if (value === 'All') {
        this.ruleForm.addressValue = '0.0.0.0/0';
      } else if (value === 'CIDR' && this.ruleForm.addressValue === '0.0.0.0/0') {
        // 如果从"全部"切换到"CIDR"，且当前值是自动填充的，则清空
        this.ruleForm.addressValue = '';
      }
    }
  }
}
</script>

<style scoped>
.access-control {
  padding: 0;
}

.section {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.section:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.section-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  display: flex;
  flex-direction: column;
}

.section-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.section-subtitle {
  margin-top: 6px;
  color: #909399;
  font-size: 14px;
}

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.badge {
  background-color: #409EFF;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
}

.highlight-text {
  color: #409EFF;
  font-weight: 500;
}

.custom-table {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.custom-table ::v-deep .el-table__header-wrapper th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.custom-table ::v-deep .el-table__row:hover {
  background-color: #ecf5ff;
}

.security-group-name {
  font-weight: 500;
  color: #303133;
}

.security-group-id {
  color: #909399;
  font-size: 13px;
}

.protocol-port {
  display: flex;
  align-items: center;
  gap: 8px;
}

.protocol-info, .source-info {
  color: #409EFF;
  cursor: pointer;
}

.danger-text {
  color: #F56C6C;
}

.danger-text:hover {
  color: #f78989;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .header-right {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media screen and (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 16px;
  }

  .header-right {
    width: 100%;
  }
}
</style>
